//这里放逻辑复用的代码，也就是提供项目需要的工具函数(钩子函数)可以复用的逻辑封装在这里
import { ref } from "vue"
import { useIntersectionObserver } from "@vueuse/core"
// 封装懒加载的复用逻辑
/**
 * 
 * @param {function} apiFn   d调用接口得函数
 */
export const useLazyData = (apiFn) => {
  const target = ref(null)
  const list = ref([])
  const { stop } = useIntersectionObserver(
    // 第一个参数，被监听得元素或组件
    target,
    async ([{ isIntersecting }]) => {
      if (isIntersecting) {
        stop()
        const data = await apiFn()
        list.value = data.result
        console.log(isIntersecting)
      }
    }
  )
  // 提供给模板使用
  return { list, target }
}